<!--
 * @Description: 发布动态
 * @Author: liu (1427179517@qq.com)
 * @Date: 2023-05-05 16:26:31
 * @LastEditors: liu (1427179517@qq.com)
 * @LastEditTime: 2023-05-12 09:33:00
 * @FilePath: \jiekuan-app\src\subPages\other\release.vue
-->

<template>
  <div class="page">
    <div class="page-header">
      <u-navbar
        title="发布动态"
        :background="nav_background"
        title-color="#fff"
        back-icon-color="#fff"
        :height="60"
        :border-bottom="false"
      >
        <span slot="right" class="invite_code" @click="handleClick({ type: 'release' })">发布 </span></u-navbar
      >
    </div>
    <div class="page-content">
      <u-input
        v-model="form_msg.contentText"
        placeholder="珍惜每一刻好时光，与懂你的人分享"
        type="textarea"
        class="textarea_box"
        height="240"
        :placeholder-style="placeholderStyle"
        :custom-style="customStyle"
        :clearable="false"
      />
      <uploadView
        uploadText=""
        ref="upload"
        moduleName="upload"
        :maxCount="9"
        :fileList="imgList"
        @onChange="handleUploadChange"
        @onPreview="handleUploadPreview"
        @onRemove="handleUploadRemove"
        class="uploadViewId negative-m-1 u-m-t-20"
        :width="200"
        :height="200"
      >
      </uploadView>
      <div class="u-flex u-col-center address u-m-t-24">
        <image src="../../static/images/location2.png" class="location u-m-r-15" alt="" />
        <span>{{ city }}</span>
      </div>
    </div>
    <div class="page-footer"></div>
  </div>
</template>

<script>
import uploadView from '@/components/yl-uploadView'
	import {
		loadBMap
	} from '@/utils/getUserLocation'
	
export default {
  name: 'Release', // 页面名称
  components: { uploadView }, // 挂载组件
  props: {}, // 组件传值
  data() {
    return {
      nav_background: { backgroundImage: 'transparent' },
      placeholderStyle: 'color: #DCDCDC; font-size: 25rpx', // 输入框提示
      customStyle: { color: '#fff', fontSize: '25rpx' }, // 输入框文字
      form_msg: {
        contentText: '', // 文本信息
        latitude: '29.876794', // 纬度
        longitude: '121.635056', // 经度
        detailLocation: '宁波软件园B', // 地址
        contentUrl: '', // 内容链接
      }, // 发布信息
      imgList: [], // 图片列表
      city: '宁波市', // 市
    }
  },
  computed: {}, // 计算机属性 类似与data概念
  watch: {}, // 监控data中数据变化
  created() {
	  window.initBaiduMapScript = () => {
	  	console.log(BMap);
	  	this.getNowLocation()
	  }
	  loadBMap('initBaiduMapScript');
  }, // 生命周期-创建完成(可以访问当前this实例)
  mounted() {}, // 生命周期-挂载完成(可以访问DOM元素)
  methods: {
    handleClick(options) {
      const { type } = options
      const list = []
      switch (type) {
        case 'release':
          if (!this.form_msg.contentText && !this.imgList.length) {
            this.$toast('请输入要发布的内容或上传要发布的图片')
            return
          }
          this.imgList.forEach((item) => {
            list.push(item.url)
          })
          this.form_msg.contentUrl = list.join(',')
          this.apiPostDmContentCreate()
          break
        default:
          break
      }
    },
    // 发布动态
    apiPostDmContentCreate() {
      this.$u.api.PostDmContentCreate(this.form_msg).then((res) => {
        this.$toast('发布成功')
        setTimeout(() => {
          uni.navigateBack()
        }, 2000)
      })
    },
    /**
     * @author: yiling (315800015@qq.com)
     * @description: 全屏预览图片时触发
     * @param {String} url 为当前选中的图片地址
     * @param {Array} lists 目前组件内的所有图片数组，index为通过props传递的index参数
     * @param {Number} name 为通过props传递的index参数(1.6.1加入)
     * @return {*}
     * @Date: 2021-04-17 11:36:57
     */
    handleUploadPreview(options) {
      uni.setStorageSync('uploadRefresh', true)
    },
    /**
     * @author: yiling (315800015@qq.com)
     * @description: 移除图片时触发
     * @param {Number} index 索引
     * @param {Array} lists 完整数据
     * @param {Number} name 通过props传递的index参数
     * @return {*}
     * @Date: 2021-04-18 13:09:47
     */
    handleUploadRemove(options) {
      const { index, lists, name, moduleName } = options
      console.log('onRemove', options)
      this.imgList.splice(index, 1)
    },
    /**
     * @author: yilingsj（315800015@qq.com）
     * @description: 上传后触发
     * @param {type}
     * @return:
     * @Date: 2020-07-20 10:43:06
     */
    handleUploadChange(options) {
      console.log(options, '引用后上传结束')
      const { res, index, lists, moduleName } = options
      const data = JSON.parse(res.data)
      this.imgList.push({ url: data.data })
    },
    // 获取位置
    getNowLocation() {
		var that = this;
		this.$nextTick(function() {
			try {
				const geolocation = new BMap.Geolocation();
				geolocation.getCurrentPosition(function(r) {
					var city = r.address.city;
					if (city) {
						console.log(city);
						that.city = city;
					}
					that.form_msg.latitude = r.latitude;
					that.form_msg.longitude = r.longitude;
				});
			} catch (e) {
				console.log(e)
			}
		})
    },
  }, // 挂载一些方法
  onLoad(options) {
    this.getNowLocation()
    // console.log('onLoad', options, Date.now())
	
  }, // 生命周期回调—监听页面加载
  onShow() {}, // 生命周期回调—监听页面显示
  onReady() {}, // 生命周期回调—监听页面初次渲染完成
  onHide() {}, // 生命周期回调—监听页面隐藏
  onUnload() {}, // 生命周期回调—监听页面卸载
}
</script>

<style lang="scss" scoped>
.page {
  background-image: url('http://minio.tianhong.mobi/mall/xiaoq/home_bg.png');
  width: 100%;
  background-size: cover;
  background-repeat: no-repeat;
}
.invite_code {
  width: 120rpx;
  height: 65rpx;
  background: #fcc307;
  border-radius: 33rpx;
  font-size: 25rpx;
  font-family: Microsoft YaHei UI;
  font-weight: 400;
  color: #ffffff;
  text-align: center;
  display: inline-block;
  line-height: 65rpx;
  margin-right: 20rpx;
}
.page-content {
  padding: 20rpx 35rpx;
}
.address {
  font-size: 25rpx;
  font-family: Microsoft YaHei UI;
  font-weight: 400;
  color: #ffffff;
}
.location {
  width: 32rpx;
  height: 35rpx;
}
</style>
